<template>
  <div class="yx-table table-border">
    <el-table ref="yxTable" v-loading="props.loading" v-bind="$attrs" :data="props.data"
      :row-class-name="tableRowClassName" :max-height="props.maxHeight" @selection-change="selectionchange"
      @sort-change="sortChange">
      <el-table-column v-if="props.selection" type="selection" width="50" :selectable="selectInit" />
      <el-table-column v-if="props.isSerialNum" type="index" width="50" fixed="left" />
      <el-table-column v-for="item in columns" :key="item.prop" v-bind="{ ...item }"
        :show-overflow-tooltip="item.hideTooltip ? false : true" :align="item.align ? item.align : 'center'"
        header-align="center">
        <!-- <template #header>
          <span v-if="item.isRequired" class="red-x">*</span>
          {{ item.label }}
          <el-popover placement="top-start" :content="item.tips" :disabled="!item.tips" trigger="hover">
            <template #reference>
            </template>
</el-popover>
</template> -->
        <template v-slot="scope">
          <slot v-if="item.customCell" :name="item.prop" v-bind="scope">
            {{ scope.row.status }}
          </slot>
          <span v-else>{{ scope.row[item.prop] }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="props.showOperator" align="center" fixed="right" :label="operateLabel" min-width="150">
        <template v-slot="scope">
          <slot name="operate" v-bind="scope">
          </slot>
        </template>
      </el-table-column>
    </el-table>
    <div v-if="props.isPage" class="table-tool">
      <el-pagination :current-page="props.page" :page-size="props.psize" :total="props.total"
        layout="total, sizes, prev, pager, next, jumper" @size-change="sizeChange" @current-change="currentChange">
        <div class="custom-tool">
          <slot name="tool"></slot>
        </div>
      </el-pagination>
    </div>
  </div>
</template>
<script setup name="yxTable">
import { reactive, computed } from 'vue';
const emit = defineEmits(['selectInit', 'size-chang', 'current-change', 'onchange', 'sortChange', 'tableRowClassName']);
const props = defineProps({
  selection: {
    type: Boolean,
    default: true
  },
  isSerialNum: {
    type: Boolean,
    default: true
  },
  columnData: {
    type: Array,
    default() {
      return []
    }
  },
  data: {
    type: Array,
    default() {
      return []
    }
  },
  showOperator: {
    type: Boolean,
    default: true
  },
  isPage: {
    type: Boolean,
    default: true
  },
  loading: {
    type: Boolean,
    default: false
  },
  maxHeight: {
    type: Number,
    default: 550
  },
  page: {
    type: Number,
    default: 0
  },
  psize: {
    type: Number,
    default: 0
  },
  total: {
    type: Number,
    default: 0
  },
  operateLabel: {
    type: String,
    default: '操作'
  }
})
// const state = reactive({
//   page: {
//     page: 1,
//     psize: 10,
//   }
// })
const selectInit = (row) => {
  let result = true
  emit('selectInit', row, (val) => {
    result = val
  })
  return result
}
const sizeChange = (pageSize) => {
  emit('size-change', pageSize)
}
const currentChange = (currentPage) => {
  emit('current-change', currentPage)
}
const selectionchange = (val) => {
  emit('onchange', val)
}
const sortChange = (val) => {
  emit('sortChange', val)
}
const tableRowClassName = ({ row }) => {
  let result = true
  emit('tableRowClassName', row, (val) => {
    result = val
  })
  return result
}
const columns = computed(() => {
  return props.columnData.filter((column) => {
    return column.visible
  })
})
const initPage = () => {
  state.page = {
    page: 1,
    psize: 10,
  }
}
defineExpose({
  initPage
})
</script>

<style scoped lang="scss">
.table-tool {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;

  .custom-tool {
    display: flex;
    align-items: center;
  }

  .tool-select-all {
    padding-left: 14px;
    margin-right: 10px;
  }
}

.red-x {
  color: red;
}

.el-button+.el-button {
  margin-left: 5px !important;
}

.el-button--small {
  padding: 5px !important;
}
</style>
